<template>
  <el-table
    class="common-input-table"
    :class="{ 'add-table': addTable }"
    :data="tableData"
    style="overflow: visible"
    border
    :row-style="rowStyle"
    :span-method="spanMethod"
    :cell-style="cellStyle"
    empty-text=" "
  >
    <el-table-column prop="cj" label="车间" width="80" align="center">
      <template slot-scope="{ row, $index }">
        <el-row v-if="addTable" type="flex" align="middle">
          <el-select v-model="row.cj" size="small">
            <el-option
              v-for="(item, index) in cjOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-row>
        <template v-else>
          <el-row v-if="$index < sumIndex" type="flex" align="middle">
            <el-select
              v-model="row.cj"
              size="small"
              @change="() => edit(row, 'cj')"
            >
              <el-option
                v-for="(item, index) in cjOption"
                :key="index"
                :label="item['key_value']"
                :value="item['key_value']"
              ></el-option>
            </el-select>
          </el-row>
          <span v-else>{{ row.cj + ' ' +row.gongxu }}</span>
        </template>
      </template>
    </el-table-column>

    <el-table-column
      prop="gongxu"
      label="工序"
      align="center"
      min-width="120"
    />

    <el-table-column prop="pz" label="前纺品种" width="150" align="center">
      <template slot-scope="{ row }">
        <el-row type="flex" align="middle">
          <el-select
            v-model="row.pz"
            size="small"
            @change="() => edit(row, 'pz')"
          >
            <el-option
              v-for="(item, index) in pzOptionChange(row['gongxu'])"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-row>
      </template>
    </el-table-column>

    <el-table-column width="150" align="center" label="机号">
      <template slot-scope="{ row }">
        <el-row type="flex" align="middle" justify="space-between">
          <div v-html="getSeiresDevsn(row['devSnArea'])"></div>
          <div class="add-btn" @click="showDialog(row, 'devSnArea')">
            +
          </div>
        </el-row>
      </template>
    </el-table-column>

    <el-table-column
      prop="jhts"
      label="计划台数 24h"
      align="center"
      min-width="120"
    />
    <el-table-column label="甲A开台 8h" align="center" min-width="100">
      <template slot-scope="{ row, $index }">
        <el-row v-if="addTable" type="flex" align="middle">
          <el-input type="small" v-model="row.jakt"></el-input>
        </el-row>
        <template v-else>
          <el-input-number
            v-if="$index < sumIndex"
            type="small"
            v-model="row.jakt"
            :controls="false"
            @change="() => edit(row, 'jakt')"
            :min="0"
            :precision="2"
          ></el-input-number>
          <span v-else>{{ row.jakt }}</span>
        </template>
      </template>
    </el-table-column>
    <el-table-column label="乙B开台 8h" align="center" min-width="100">
      <template slot-scope="{ row, $index }">
        <el-row v-if="addTable" type="flex" align="middle">
          <el-input type="small" v-model="row.ybkt"></el-input>
        </el-row>
        <template v-else>
          <el-input-number
            v-if="$index < sumIndex"
            type="small"
            v-model="row.ybkt"
            :controls="false"
            @change="() => edit(row, 'ybkt')"
            :min="0"
            :precision="2"
          ></el-input-number>
          <span v-else>{{ row.ybkt }}</span>
        </template>
      </template>
    </el-table-column>
    <el-table-column label="丙C开台 8h" align="center" min-width="100">
      <template slot-scope="{ row, $index }">
        <el-row v-if="addTable" type="flex" align="middle">
          <el-input type="small" v-model="row.bckt"></el-input>
        </el-row>
        <template v-else>
          <el-input-number
            v-if="$index < sumIndex"
            type="small"
            v-model="row.bckt"
            :controls="false"
            @change="() => edit(row, 'bckt')"
            :min="0"
            :precision="2"
          ></el-input-number>
          <span v-else>{{ row.bckt }}</span>
        </template>
      </template>
    </el-table-column>

    <el-table-column label="锭数" align="center" prop="ds" min-width="100">
      <template slot-scope="{ row, $index }">
        <el-input-number
          v-if="$index < sumIndex"
          type="small"
          v-model="row.ds"
          :controls="false"
          @change="() => edit(row, 'ds')"
          :min="0"
          :precision="2"
        ></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="定量" align="center" prop="dl" min-width="100">
      <template slot-scope="{ row, $index }">
        <el-input-number
          v-if="$index < sumIndex"
          type="small"
          v-model="row.dl"
          :controls="false"
          @change="() => edit(row, 'dl')"
          :min="0"
          :precision="2"
        ></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="车速" align="center" prop="cs" min-width="100">
      <template slot-scope="{ row, $index }">
        <el-input-number
          v-if="$index < sumIndex"
          type="small"
          v-model="row.cs"
          :controls="false"
          @change="() => edit(row, 'cs')"
          :min="0"
          :precision="2"
        ></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="效率" align="center" prop="xiaolv" min-width="100">
      <template slot-scope="{ row, $index }">
        <el-input-number
          v-if="$index < sumIndex"
          type="small"
          v-model="row.xiaolv"
          :controls="false"
          @change="() => edit(row, 'xiaolv')"
          :min="0"
          :precision="2"
        ></el-input-number>
      </template>
    </el-table-column>
    <el-table-column
      label="工资定额(长度)"
      width="132"
      align="center"
      prop="gzdecd"
      :formatter="fixedFormatter"
    />
    <el-table-column label="细纱计划" align="center" width="120">
      <template slot-scope="{ row, $index }">
        <el-row v-if="addTable" type="flex" align="middle">
          <el-input type="small" v-model="row.xsjh"></el-input>
        </el-row>
        <template v-else>
          <el-input-number
            v-if="$index < sumIndex"
            type="small"
            v-model="row.xsjh"
            :controls="false"
            @change="() => edit(row, 'xsjh')"
            :min="0"
            :precision="2"
          ></el-input-number>
          <span v-else>{{ row.xsjh }}</span>
        </template>
      </template>
    </el-table-column>

    <el-table-column label="实开计划前(长度) 8h" align="center" width="160">
      <template slot-scope="{ row, $index }">
        <el-row v-if="addTable" type="flex" align="middle">
          <el-input type="small" v-model="row.skjhqcd"></el-input>
        </el-row>
        <template v-else>
          <el-input-number
            v-if="$index < sumIndex"
            type="small"
            v-model="row.skjhqcd"
            :controls="false"
            @change="() => edit(row, 'skjhqcd')"
            :min="0"
            :precision="2"
          ></el-input-number>
          <span v-else>{{ row.skjhqcd }}</span>
        </template>
      </template>
    </el-table-column>

    <el-table-column label="临时计划(T)" align="center" width="120">
      <template slot-scope="{ row, $index }">
        <el-row v-if="addTable" type="flex" align="middle">
          <el-input type="small" v-model="row.lsjh"></el-input>
        </el-row>
        <template v-else>
          <el-input-number
            v-if="$index < sumIndex"
            type="small"
            v-model="row.lsjh"
            :controls="false"
            @change="() => edit(row, 'lsjh')"
            :min="0"
            :precision="2"
          ></el-input-number>
          <span v-else>{{ row.lsjh }}</span>
        </template>
      </template>
    </el-table-column>

    <el-table-column
      prop="jhcl"
      label="计划产量前(T) 24h"
      align="center"
      min-width="140"
    />
    <el-table-column
      prop="ja8"
      label="甲A(T) 8h"
      align="center"
      min-width="94"
    />
    <el-table-column
      prop="yb8"
      label="乙B(T) 8h"
      align="center"
      min-width="94"
    />
    <el-table-column
      prop="bc8"
      label="丙C(T) 8h"
      align="center"
      min-width="94"
    />
    <el-table-column label="操作" width="64" align="center">
      <div class="table-btn" slot-scope="{ row, $index }">
        <el-button v-if="$index < sumIndex" type="text" @click="delPerson(row)"
          >移出</el-button
        >
      </div></el-table-column
    >
    <template v-if="!addTable" slot="append">
      <el-row class="table-append"> 计划人：{{ planner }} </el-row>
    </template>
    <l-dialog
      ref="dialog"
      :time="time"
      @getData="getData"
      @getDevSnArr="getDevSnArr"
    ></l-dialog>
  </el-table>
</template>

<script>
import { editQianfangPlan, delXishaPlan } from '@/api/productionPlan';
import lDialog from './dialog.vue';
export default {
  components: { lDialog },
  props: {
    addTable: {
      type: Boolean //两种表格 1种添加（操作都不调用接口） 1种调用接口
    },
    // 班次/车间信息等
    search: {
      type: Object,
      default: function() {
        return {};
      }
    },
    wtOption: {
      type: Array,
      default: function() {
        return [];
      }
    },
    tableData: {
      type: Array,
      default: function() {
        return [];
      }
    },
    // 从第几行开始为合并行
    sumIndex: {
      type: Number,
      default: 0
    },
    qcIndex: {
      type: Number,
      default: 0
    },
    areaArr: {
      type: Array,
      default: function() {
        return [];
      }
    },
    planner: {
      type: String,
      default: ''
    },
    time: {
      type: String
    },
    pzOption: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    }
  },
  methods: {
    showDialog(row, param) {
      this.$refs.dialog.show(row, param, this.addTable);
    },
    // 修改
    async edit(row, editParams) {
      if (!this.addTable) {
        let params = this.$_.pick(row, ['id', editParams]);
        const res = await editQianfangPlan(params);
        if (res.code == 1) {
          this.$message.success('修改成功');
          if (editParams == 'cj') {
            this.getData();
          }
        }
      }
    },
    // 移除
    async delPerson(row, index) {
      if (this.addTable) {
        this.tableData.splice(index, 1);
      } else {
        let params = this.$_.pick(row, ['id']);
        const res = await delXishaPlan(params);
        if (res.code == 1) {
          this.$message.success('操作成功');
          this.getData();
        }
      }
    },
    getData() {
      this.$parent.getData();
    },
    getDevSnArr(params, arr, index) {
      this.$set(this.tableData[index], params, arr);
    },
    rowStyle({ row, rowIndex }) {
      if (!this.addTable) {
        if (rowIndex >= this.sumIndex && rowIndex < this.qcIndex) {
          return {
            background: '#F6F9FF',
            fontSize: '14px',
            fontWeight: 'bold'
          };
        } else if (rowIndex >= this.qcIndex) {
          return { background: '#F6F9FF' };
        }
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 && !this.addTable) {
        if (rowIndex >= this.qcIndex) {
          return { textAlign: 'left', paddingLeft: '38px' };
        } else if (rowIndex >= this.sumIndex && rowIndex < this.qcIndex) {
          return { textAlign: 'left', paddingLeft: '30px' };
        }
      }
      if (this.addTable && rowIndex == this.tableData.length - 1) {
        return { borderBottom: 'none' };
      }
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (!this.addTable) {
        if (rowIndex >= this.sumIndex) {
          if (columnIndex == 0) {
            return [1, 8];
          } else if (columnIndex > 0 && columnIndex < 8) {
            return [0, 0];
          }
        } else {
          if (columnIndex === 0) {
            const row1 = this.areaArr[rowIndex];
            const col1 = row1 > 0 ? 1 : 0;
            return {
              rowspan: row1,
              colspan: col1
            };
          }
        }
      }
    },
    // 获取连续车台
    getSeiresDevsn(arr) {
      if (arr) {
        var result = [],
          i = 0,
          str = '';
        if (arr.length > 0) {
          result[i] = [arr[0]];
          arr.reduce(function(prev, cur) {
            parseInt(cur) - parseInt(prev) == 1
              ? result[i].push(cur)
              : (result[++i] = [cur]);
            return cur;
          });
          result.map(item => {
            if (item.length > 1) {
              str += `#${item[0]}~#${item[item.length - 1]}<br>`;
            } else {
              str += `#${item[0]}<br>`;
            }
          });
        } else {
          str = '';
        }
        return str;
      }
    },
    fixedFormatter(row, col, val) {
      if (val) {
        return parseFloat(val).toFixed(2);
      }
    },
    pzOptionChange(gongxu) {
      let arr = [];
      if (this.pzOption) {
        let gx = this.pzOption.filter(item => {
            return item.gongxu == gongxu;
        });
        arr = gx[0]['pzArr'];
      }
      return arr;
    }
  }
};
</script>

<style lang="scss" scoped>
.add-table {
  &::before {
    display: none;
  }
}
</style>
